@charset 'utf-8';

$blackcolor:#252525;
$fontcolor:#6a6969;
$bluecolor:#139ab8;
$grayfontcolor:#7d7c7c;
@mixin widHeiMar($wid,$hei,$mar){
    width: $wid;
    height: $hei;
    margin: $mar;
}

.left_sidebar{
    width: 216px;
    height: 2132px;
    background: black;
    .button_group{
        width: 216px;
        height: 222px;
        li{
            width: 216px;
            height: 41px;
            margin-bottom: 4px;
            background: $blackcolor;         
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
                color: $fontcolor; 
                display: inline-block;           
             }
        }
        
        li:nth-of-type(n) span:first-of-type{
            display: inline-block;
            width: 20px;
            height: 17px;
            margin-left: 20px;
            vertical-align: middle;
            line-height: 41px;
        }
        
         li:nth-of-type(n) span:nth-of-type(2){
            display: inline-block;
            width: 59px;
            height: 13px;
            font-size: 13px;
            margin-left: 18px;
            vertical-align: middle;
            line-height: 32px;
        }
        li:last-of-type{
            margin-bottom: 0;
        }
        
        li:hover img{
            transform: translateY(-5px) scale(1.2) rotate(360deg);
            transition: all 300ms ease-in-out 150ms;
        }
        
        li:hover{
            background: rgba(37,37,37,0.6);
            transition: all 100ms ease-in-out 150ms;
            cursor: pointer;
            a{
                animation: delay_color 1200ms ease-in forwards;
            }
        }
        @keyframes delay_color{
            0%{
                color: $fontcolor; 
            }
            20%{
                color: #a39999;
            }
            40%{
                color: #b9b0b0;
            }
            60%{
                color: #d0caca;
            }
            80%{
                color: #e3dfdf;
            }
            100%{
                color: white;
            }
        }
    }

}


.left_sidebar{
    .adv_group{
        width: 216px;
        height: 1903px;
        margin-top: 8px;
        background: $blackcolor;
             
        li{
            width: 216px;
            height: 124px;          
            a{
                width: 216px;
                height: 124px;
                display: inline-block;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        
        li:first-child,li:nth-child(4){
            height: 178px;
            a{
               height: 100%;
               img{
                   width: 100%;
                   height: 100%;
               }
            }
        }
        
        li:first-child~li{
            margin-top: 10px;
        }
        
        li:hover{
            img{
                animation: move_and_rotate 5000ms ease-in-out 150ms forwards;
            }
        }
        @keyframes move_and_rotate{
            0%{
                transform: translateX(0px) rotateY(0deg) scale(1) skew(-5deg);      
            }
            10%{
                transform: translateX(-50px) rotateY(0deg) scale(1) skew(-5deg);
            }
            
            20%{
                transform: translateX(-150px) rotateY(0deg) scale(1) skew(-5deg);
            }
            30%{
                transform: translateX(-200px) rotateY(0deg) scale(1) skew(-5deg);
            }
            
            40%{
               transform: translateX(-216px) rotateY(0deg) scale(1) skew(0deg); 
            }
            
            50%{
                transform: translateX(-216px) rotateY(360deg) scale(1) skew(0deg); 
            }
            100%{
                transform: translateX(0px) scale(1) skew(0deg);
            }
        }
        
        li:nth-of-type(1){
            background: url(../img/adv2.jpg) 0 0 no-repeat;
            background-size: 216px 178px;
        }
        
        li:nth-of-type(2){
            background: url(../images/img_001.jpg) 0 0 no-repeat;
            background-size: 216px 124px;
        }
        
        li:nth-of-type(3){
            background: url(../images/img_002.jpg) 0 0 no-repeat;
            background-size: 216px 124px;
        }
        
        li:nth-of-type(4){
            background: url(../images/img_004.jpg) 0 0 no-repeat;
            background-size: 216px 124px;
        }
        
        li:nth-of-type(5){
            background: url(../images/img_001.jpg) 0 0 no-repeat;
            background-size: 216px 124px;
        }
    }
}




.right_sidebar{
    width: 152px;
    height: 1955px;
    background: black;
    .hot_talk{
        width: 152px;
        height: 329px;
        background: $blackcolor;
        li{
            a{
                width: 100%;
                height: 100%;
                display: inline-block;
            }
            a:hover{
               color: $bluecolor;
               transition: color 100ms ease ; 
            }
                     
        }
        li:first-of-type~li:not(:last-of-type):hover{
            background: rgba(0,0,0,0.5);
        }
        li:first-of-type{
            text-align: center;
            font-size: 14px;
            color: $bluecolor;
            width: 137px;
            height: 38px;
            border-bottom: 1px solid #444444;
            margin: 0 auto;
            line-height: 38px;           
            animation: title_animation 9000ms ease-in-out 1500ms infinite;
            
        }
        
        @keyframes title_animation{
            0%{
                transform: skew(0deg);
                text-shadow: 0px 0px 0px #73c2d3;
                color: $bluecolor; 
                opacity: 1;
            }
            25%{
                transform: skew(-10deg);
                 text-shadow: 2px -4px 5px $grayfontcolor;
                 color: $grayfontcolor; 
                 opacity: 0.25;           
            }
            50%{
                 transform: skew(0deg);
                 text-shadow: 2px 4px 5px #73c2d3;
                 color: white;
                 opacity: 0.5;            
            }
            
            75%{
                transform: skew(10deg);
                 text-shadow: 2px -4px 5px $grayfontcolor;
                 color: $grayfontcolor;  
                 opacity: 0.25;          
            }
            
            100%{
                transform: skew(0deg);
                text-shadow: 0px 0px 0px #73c2d3;
                color: $bluecolor; 
                opacity: 1;
            }
        }
        
        li:last-of-type{
            text-align: right;                     
            width: 137px;
            height: 38px;
            border-top: 1px solid #444444;
            margin: 0 auto;
            line-height: 38px;
            a{
               color: $bluecolor;
               font-size: 14px;   
               span{
                   letter-spacing: 5px;
               }
            }
            
            
        }
        
        li:nth-last-of-type(2){
            margin-bottom: 12px;
        }
        
        li:nth-of-type(2){
            margin-top: 7px;
            line-height: 28px;
        }
        
        li:nth-of-type(2)~li{
            line-height: 28px;
        }
        
        li{
            
           a{
               color: $grayfontcolor;
               font-size: 12px;
           } 
        }
        
 
    }
    
    
    
    
    
    .work_chance{
       width: 152px;
       height: 580px; 
       background: $blackcolor;
       margin: 6px auto;
        li:first-of-type{
            text-align: center;
            font-size: 14px;
            color: $bluecolor;
            width: 137px;
            height: 38px;
            border-bottom: 1px solid #444444;
            margin: 0 auto;
            line-height: 38px;
        }
        
        li:last-of-type{
            text-align: right;                     
            width: 137px;
            height: 38px;
            border-top: 1px solid #444444;
            margin: 0 auto;
            line-height: 38px;
            a{
               color: $bluecolor;
               font-size: 14px;   
               span{
                   letter-spacing: 5px;
               }
            }
        }
      
        li:nth-of-type(1)~li:not(:last-child){
            width: 137px;
            margin: 9px auto 0;
            padding-bottom: 9px;
        }
         
        li:last-child{
            border-top: 0;
            border-bottom: 0;
        }
        
        li{
            line-height: 23px;
            font-size: 12px;
            color: $grayfontcolor;
            border-bottom: 1px solid #444444;
            p{
               width: 137px;
               text-align: left;
               margin: 0 auto;
               a{
                   font-size: 14px;
                   color: $bluecolor;
               }
            }
        }
    }
    .new_guy{
        width: 152px;
        height: 480px;
        background: $blackcolor;
        li:first-of-type{
            text-align: center;
            font-size: 14px;
            color: $bluecolor;
            width: 137px;
            height: 38px;
            border-bottom: 1px solid #444444;
            margin: 0 auto;
            line-height: 38px;        
        }
        
        li:last-of-type{
            text-align: right;                     
            width: 137px;
            height: 38px;
            border-top: 1px solid #444444;
            margin: 0 auto;
            line-height: 38px;
            a{
               color: $bluecolor;
               font-size: 14px;   
               span{
                   letter-spacing: 5px;
               }
            }
        }
        
        li{
           .small_header{ 
            height: 79px;         
            margin-left: 12px;
            margin-top: 14px;
            font-size: 12px;
                .imgwrap{
                    width: 52px;                   
                    height: 57px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                
                p{
                    margin-top: 8px;
                    a{
                        color: $grayfontcolor;
                    }
                }
           } 
        }
        
        li:nth-child(n){
            .small_header:nth-child(2){
                margin-left: 21px;
            }
        }
        
        li:nth-last-of-type(2){
            .small_header{
                 margin-bottom: 14px;
            }
        }
    }
    
    
    
    
    .already_visitor{
        width: 152px;
        height: 538px; 
        margin: 6px auto;
        background: $blackcolor;
        li{
            font-size: 12px;
            margin-top: 19px;
            margin-left: 12px;
            .small_header{                
                .imgwrap{
                    width: 52px;                   
                    height: 57px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                
                p{
                    margin-left: 10px;
                    line-height: 22px;
                    color: #787878;
                    a{
                       color: #787878; 
                    }
                }
            }
        }
        
         li:first-of-type{
            text-align: center;
            font-size: 14px;
            color: $bluecolor;
            width: 137px;
            height: 38px;
            border-bottom: 1px solid #444444;
            margin: 0 auto;
            line-height: 38px;        
        }
        
        li:nth-last-of-type(2){
            text-align: right;                     
            width: 137px;
            height: 38px;
            border-top: 1px solid #444444;
            margin: 0 auto;
            line-height: 38px;
            a{
               color: $bluecolor;
               font-size: 14px;   
            }
        }
        
         li:last-of-type{
            text-align: right;                     
            width: 137px;
            height: 38px;
            border-top: 1px solid #444444;
            margin-top: 0;
            margin: 0 auto;
            div[class="clearfix"]{
                width: 111px;
                height: 38px;
                margin: 0 auto;
                text-align: center;
                div{
                    margin-top: 11px;
                    margin-left: 11px; 
                }
                h6,p{
                    color: #787878;
                }
            }
            
        }  
        
        li:nth-last-of-type(3){
            margin-bottom: 12px;
        }    
    }
    
}
